<template>
    <div>
      <h1>学生签到界面</h1>
      <div v-if="signInfo" class="sign-popup">
        <p>教师发起了签到，请输入签到码进行签到。</p>
        <input v-model="signCode" type="text" placeholder="输入签到码" />
        <button @click="submitSign">签到</button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useCourseManageIdStore } from '@/stores/courseManageId.js';
  import { useSignIdStore } from '@/stores/signId.js';
  import { useUserIdStore } from '@/stores/userId.js';
  import { submitSign } from '@/api/sign1.js';
  
  const courseManageIdStore = useCourseManageIdStore();
  const signIdStore = useSignIdStore();
  const userIdStore = useUserIdStore();
  
  const signInfo = ref(null);
  const signCode = ref('');
  
  const submitSignHandler = async () => {
    const signId = signIdStore.signId;
    const userId = userIdStore.userId;
    const courseManageId = courseManageIdStore.courseManageId;
    const code = signCode.value;
  
    try {
      await submitSign(signId, userId, code, courseManageId);
      signInfo.value = null; // 签到成功后，关闭签到提示框
    } catch (error) {
      console.error('签到失败:', error);
    }
  };
  
  onMounted(() => {
    // 监听 signId 变化，当教师发起签到时，显示签到提示框
    signIdStore.$subscribe((mutation, state) => {
      if (state.signId) {
        signInfo.value = { signId: state.signId };
      }
    });
  });
  </script>